JQuery

How to glow a message highlight using JQuery UI?

How to glow a message highlight using JQuery UI?, someone asked me to explain?
By:

In this article I will show how to glow a message highlight for 2 seconds using highlight effect implemented in jQuery UI. We can set color and time duration for the effect.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>highlight textusing JQuery UI</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style>
        #toggle {
            width: 225px;
            height: 100px;
            background: #e4e0e0;
            padding: 15px 15px 1px 15px;
            margin-top: 10px;
            border: 1px solid rgba(0,0,0,.1);
        }
        .btn {
            width: 150px;
            height: 50px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
       $(document).ready(function () {
            $("#btnShow").click(function () {
               $("#toggle").toggle("highlight",2000);
            });
        });
    </script>
</head>
<body style="border: 1px solid gray;width: 500px;padding: 15px 15px 10px 15px;">
    <button class="btn" id="btnShow">Click button to highlight message.</button>
    <div id="toggle">
        Thehighlight effect hides or shows an element by animating its background colorfirst.
    </div>
</body>
</html>

glow a message highlight using JQuery UI

Related Article

Post your comments / questions



Recent Article